<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      <span :class="$route.path.includes(data.path) ? 'active' : ''" v-if="data.children">
        {{ data.name }}
      </span>
      <nuxt-link :class="$route.path.includes(data.path) ? 'active' : ''" v-else :to="data.path">
        {{ data.name }}
      </nuxt-link>
      <i v-if="data.children" class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <div v-if="data.children">
        <el-dropdown-item v-for="item in data.children" :key="item.path">
          <NuxtLink :to="item.path">{{ item.name }}</NuxtLink>
        </el-dropdown-item>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    data: Object
  }
}
</script>
